import { lazy, Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { Layout } from "antd";
import '../assets/css/index.css'
import VNav from '../components/nav'
const { Header, Sider, Content } = Layout;
const Home = lazy(() => import('../views/home'))
const Menu = lazy(() => import('../views/menu/menu'))
const Role = lazy(() => import('../views/role/role'))
const User = lazy(() => import('../views/user/user'))
const Cart = lazy(() =>import('../views/cart/cart'))
const Goods = lazy(() => import('../views/goods/goods'))
export default function Index() {
    return (
        <div className='index'>
            <Layout>
                <Header className='header'>小U商城大型后台管理系统</Header>
                <Layout>
                    <Sider className='der'>
                        <VNav></VNav>
                    </Sider>
                    <Content>
                        <Suspense fallback={<h2>正在加载组件.....</h2>}>
                            <Routes>
                                <Route path='home' element={<Home></Home>}></Route>
                                <Route path='menu' element={<Menu></Menu>}></Route>
                                <Route path='role' element={<Role></Role>}></Route>
                                <Route path='cart' element={<Cart></Cart>}></Route>
                                <Route path='user' element={<User></User>}></Route>
                                <Route path='goods' element={<Goods></Goods>}></Route>
                                <Route path='*' element={<Navigate to='/index/home'></Navigate>}></Route>
                            </Routes>
                        </Suspense>
                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}
